<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 视频标签 -->
    <video src="./video/01-logo.mp4" width="500px" controls muted poster="../css02/images/大蛇丸.jpg" loop></video>
    src 视频路径
    controls 视频播放控件
    autoplay 自动播放 google是自动播放,但是加了muted可以静音播放
    loop循环播放
    poster 视频第一帧,封面

    <!-- 属性选择器 -->
    以bo 开头的全选中 div[class^=bo]{}
    以x 结尾的全选中 div[class$=x]
    class等于的类名全选中 div[class=box1]

    <!-- 结构选择器 -->
    给最后一个加属性
    .dad li:last-child{}

    给第一个加属性
    .dad li:first-child{}

    给第几个加属性
    .dad li:nth-child(数字)
    数字可以写 n ,就代表所有的数字
    10n 就是10*n,就是每10个加属性
    -n+5就是选中前五个
    n+5选中从第五个开始之后所有的

    偶数 2n
    奇数 2n+1

    <!-- 伪元素 -->
    .类 :伪类 ::伪元素
    伪元素是通过css添加进来的 实际上不在存在在dom树上的
    伪元素添加进来的是一个行内元素

    必须添加centen

    li::before{ centen:'' }
    在li 的最开始添加内容
    li::after{ centen:'' }
    在li 的最后添加内容

    <!-- 过渡 -->
    在hover里添加要变的属性,只能是数值类
    之后在变动属性添加transition,控制时间
    transition: 300ms;
</body>

</html>